<template>
	<div>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-card shadow="never" class="card">
					<div id="charts_one" style="width:100%;min-height:80vh">
						<Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
						<div class="btn-group" style="margin-bottom:11px;">
            <div>
              <el-button type="warning"  size="mini" icon="el-icon-download"  @click="dumpdata(ids)" v-if="checkPermission('/app/worktime/dumpdata.html')" >导出</el-button>
             </div>
             <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
						</div>
					    <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">

						    <el-table-column align="center" type="selection" width="42"></el-table-column>
                <el-table-column align="center" type="index" label="No." width="50" >
                </el-table-column>
							<el-table-column align="center"  v-if="fieldList[0].checked" property="dayTime" label="日期" show-overflow-tooltip width="" >

							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[1].checked" property="fwork" label="所属车间" show-overflow-tooltip width="" >
							</el-table-column>
							<el-table-column align="center"  v-if="fieldList[2].checked" property="userName" label="员工姓名" show-overflow-tooltip width="" >
							</el-table-column>
                <el-table-column align="center"  v-if="fieldList[3].checked" property="taskBillNo" label="生产订单" show-overflow-tooltip width="" >
                </el-table-column>
							 <el-table-column align="center"  v-if="fieldList[4].checked" property="workTime" label="工时" show-overflow-tooltip width="" >
							 </el-table-column>

						</el-table>
						<Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
					</div>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>
<script>
	import {
	    index,
    dumpdata
	} from '@/api/app/worktime'
	import Search from '@/components/common/Search.vue'
	import Page from '@/components/common/Page.vue'
	import TableTool from '@/components/common/TableTool.vue'
	import { confirm,param2Obj } from '@/utils/common'
  import XLSX from "xlsx";

	export default {
		name:'workTime',
		components: {
			Search,
			Page,
			TableTool,

		},
		data(){
			return {

				fieldList:[
					{lable:'ID',checked:true},
				    {lable:'dayTime',checked:true},
				    {lable:'fwork',checked:true},
				    {lable:'userName',checked:true},
				    {lable:'taskBillNo',checked:true},
				    {lable:'workTime',checked:true}
				],
				ids: [],
        ws:{},
				selectRows:[],
				selectTotal:0,
				single:true,
				multiple:true,
        dumppage:1,
				list: [],
				small_tables:{},
	            detailInfo:{},
        exceldata:[],
				loading: false,
				page_data: {
					limit: 20,
					page: 1,
					total:20,
				},
        filename:'',
				searchVisible:true,
				searchForm:[],
				searchData:{},
			}
		},
		methods: {
      dumpdata(){
        confirm({content:'确定要操作吗'}).then(() => {
          this.dumpshow = true
          this.confirmdumpdata()
        }).catch(() => {})
      },
      confirmdumpdata(){
        dumpdata({page:this.dumppage}).then(res => {
          if(res.data.length > 0){
            if(this.dumppage == 1){
              this.exceldata.push(res.header)
            }
            res.data.forEach((item) => {
              this.exceldata.push(Object.values(item))
            })
            this.percentage = res.percentage
            this.filename = res.filename
            this.ws = XLSX.utils.aoa_to_sheet(this.exceldata)
            this.dumppage = this.dumppage + 1
            this.confirmdumpdata()
          }else{
            let wb = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, this.ws, '工时报表')
            XLSX.writeFile(wb, this.filename)
            this.dumpshow = false
          }
        })
      },
      closedialog(){
        this.dumpshow = false
      },
			index(){
				let param = {limit:this.page_data.limit,page:this.page_data.page}
				Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
				this.loading = true
				index(param).then(res => {
					this.list = res.data
					this.small_tables=res.sql_field_data
					this.page_data.total = res.total
					this.loading = false
					if(this.page_data.page == 1){
						this.searchForm = [
						        {type:'Input',label:('员工姓名'),prop:'userName',width:'150px'},
						        {type:'datetime',label:('创建日期'),prop:'createTime',width:'150px'},
						]
					}
				})
			},
			updateExt(row,field){
				if(row.id){
					updateExt({id:row.id,[field]:row[field]}).then(res => {
						this.$message({message: this.$t('system.success'), type: 'success'})
					})
				}
			},

			selection(selection) {
			    this.selectRows=selection
			    this.selectTotal=selection.length
				this.ids = selection.map(item => item.id)
				this.single = selection.length != 1
				this.multiple = !selection.length
			},
			handleRowClick(row, rowIndex,event){
				if(event.target.className !== 'el-input__inner'){
					this.$refs.multipleTable.toggleRowSelection(row)
				}
			},
			rowClass ({ row, rowIndex }) {
				for(let i=0;i<this.ids.length;i++) {
					if (row.id === this.ids[i]) {
						return 'rowLight'
					}
				}
			},
		},	
		mounted(){
			this.index()
		}
	}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>